<template>
  <div class="login-container">
    <el-form
      ref="loginForm"
      :model="loginData"
      class="login-form"
      :rules="rules"
    >
      <div class="title-container">
        <!-- <h3 class="title">欢迎来到增选管理系统</h3> -->
      </div>

      <!-- 账号 -->
      <el-form-item prop="userName">
        <span class="svg-container">
          <SvgIcon name="userName" width="18" height="18"></SvgIcon>
        </span>
        <el-input
          ref="userName"
          v-model="loginData.userName"
          placeholder="账号"
          name="userName"
          type="text"
          class="inp"
        />
      </el-form-item>

      <!-- 密码框 -->
      <el-form-item style="margin: 10px 0" prop="passWord">
        <span class="svg-container">
          <SvgIcon name="userPassWord" width="18" height="18"></SvgIcon>
        </span>
        <el-input
          ref="passwordRef"
          v-model="loginData.passWord"
          placeholder="密码"
          name="password"
          :type="passwordType"
        />
        <span class="show-pwd" @click="showPasd">
          <SvgIcon
            v-if="passwordType"
            name="showPassWord"
            width="20"
            height="20"
          />
          <SvgIcon v-else name="closePassWord" width="20" height="20" />
        </span>
      </el-form-item>

      <el-button
        :loading="loading"
        type="primary"
        style="width: 100%; margin: 12px 0"
        @click="loginHandle"
        >登录1</el-button
      >

      <div class="tips">
        <span style="margin-right: 20px">账号: admin</span>
        <span>密码: 112233</span>
      </div>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, getCurrentInstance } from "vue";
//引入小时方法
import { getTime } from "@/utils/times";
import useUserStore from "@/stores/modules/user.ts";
import { ElNotification } from "element-plus";
import { useRouter, useRoute } from "vue-router";
const { proxy }: any = getCurrentInstance();
const userStore = useUserStore();
const $router = useRouter();
const $route = useRoute();
let passwordType = ref("password");
let passwordRef = ref();

const loginForm = ref();
//定义变量控制按钮加载效果
let loading = ref(false);

// 定义账号密码类型
interface loginData {
  userName: string;
  passWord: string;
}
// 定义表单数据
const loginData: loginData = reactive({
  userName: "admin",
  passWord: "111111",
});

// 验证账号密码
const rules = reactive({
  userName: [
    { required: true, message: "请输入账号", trigger: "blur" },
    { min: 3, message: "账号错误", trigger: "blur" },
  ],
  passWord: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, max: 16, message: "长度为6-16", trigger: "blur" },
  ],
});

// 查看密码
function showPasd() {
  passwordType.value = passwordType.value == "password" ? "" : "password";
  // 查看时自动获取焦点（增加用户体验）
  passwordRef.value.focus();
}
// 登录事件
function loginHandle() {
  loginForm.value.validate(async (valid: any) => {
    if (valid) {
      // loading.value = true;
      // await userStore.userLogin(loginData);
      console.log($route.query.redirect);

      $router.push(`${$route.query.redirect || "/"}`);
      //     try {
      //       // 是否登录成功
      //       // await userStore.userLogin(loginData);
      //       // 登录到用户退出前的页面
      //       // console.log('proxy.$route.query.redirect', proxy.$route.query.redirect)
      //       $router.push(`${$route.query.redirect || "/"}`);
      //       ElNotification({
      //         title: `Hi，${getTime()}好`,
      //         message: "欢迎回来1",
      //         type: "success",
      //       });
      //       // 关闭加载
      //       loading.value = false;
      //     } catch (error) {
      //       console.log(error);
      //       $router.push(`${$route.query.redirect || "/"}`);
      //       loading.value = false;
      //       proxy.$message.error(`登录失败111， ${error}`);
      //     }
    }
  });
}
</script>

<style lang="scss" scoped>
$bg: #2d3a4b;
$dark_gray: #889aa4;
$light_gray: #eee;
::v-deep .el-input__wrapper {
  padding: 5px 0 !important;
  background-color: transparent !important;
  box-shadow: 0px 0 0 1px rgba(255, 255, 255, 0.4);
  margin: 8px 0;
}
::v-deep .el-input__inner {
  padding: 12px 0 12px 35px;
  color: #fff;
}
.login-container {
  height: 100vh;
  width: 100%;
  background-color: $bg;
  background: url("./images/x.jpg") 0 -20px no-repeat;
  background-size: cover;
  overflow: hidden;

  .login-form {
    position: relative;
    width: 520px;
    max-width: 100%;
    padding: 260px 35px 0;
    margin: 0 auto;
    overflow: hidden;
  }

  .tips {
    font-size: 14px;
    color: #fff;
    margin-bottom: 10px;

    span {
      &:first-of-type {
        margin-right: 16px;
      }
    }
  }

  .svg-container {
    position: absolute;
    left: 8px;
    top: 16px;
  }

  .title-container {
    position: relative;

    .title {
      font-size: 26px;
      color: $light_gray;
      text-align: center;
      font-weight: bold;
      margin-bottom: 20px;
    }
  }

  .show-pwd {
    position: absolute;
    right: 10px;
    top: 18px;
    cursor: pointer;
  }
}
</style>
